<template>
    <div>
        <div class="row">
            <div class="col">
                <router-link class="card-link" :to="{ name: '更新结果测过' }">
                    <el-button>创建special judge</el-button>
                </router-link>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card" v-for="(v,i) in tableDate" :key="i" style="width: 100vh">
                    <div class="card-body">
                        <h5 class="card-title">{{ v.name }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">{{ v.description }}</h6>
                        <pre>v.context</pre>
                        <router-link
                            class="card-link"
                            :to="{ name: '更新结果测过', query: { ID: v.ID } }"
                        >修改</router-link>
                        <el-button @click="del(v.ID)">删除</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import highlight from 'highlight.js'
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { asyncdelspecialjudge } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const tableDate = ref<Studycodemodel.Ispecialjudge[]>([])

async function start() {
    store.dispatch('actionspecialjudge')
}

const store = useStore(Storekey)

async function del(ID: number) {
    ElMessageBox.confirm('确定要删除吗', '提示').then(async () => {
        try {
            await asyncdelspecialjudge({ ID });
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            store.dispatch("actionspecialjudge");
        } catch (e) {
            ElMessage({
                message: String(e),
                type: "error",
            });
        }
    })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "已取消",
            });
        });
}

onMounted(() => {
    start()
})


</script>